<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style>
    :root {
      background-color: white;
    }

    img {
      max-width: 80%;
    }
  </style>
</head>

<body>

  <the-fold></the-fold>

  <h1>Responsive images generation</h1>
  <p>
    The right image size will be used by the browser based on the device of
    the user.
  </p>

  <h2>PICTURE tag</h2>

  <h3>picture_redpanda.jpg</h3>

  <p>WebP and AVIF image sources with srcset created.</p>

  <picture>
    <img src="./picture_redpanda.jpg" alt="Red panda" />
  </picture>

  <h3>picture_music.png</h3>

  <p>image too small -> no srcset</p>

  <picture>
    <img src="./picture_music.png" alt="Girl listening to music" />
  </picture>

  <h3>picture_screenshot.png</h3>

  <picture>
    <img src="./picture_screenshot.png" alt="Girl listening to music" />
  </picture>

  <h3>Picture tag with media sources</h3>

  <picture>
    <source srcset="./long-cat.jpg" media="(width > 800px)">
    <img src="./tall-cat.jpg" alt="Image">
  </picture>

  <h2>IMG tag</h2>

  <h3>JPEG image</h2>

    <img src="./img_water.jpg" alt="beach" />

    <h3>PNG image</h3>

    First step image (@1066w) is bigger than original size WebP, so step is ignore.
    <img src="./img_screenshot.png" alt="story.to.design screeshot" />

    <h3>Image without [width] attribute</h3>
    <img src="./img_music.png" alt="Girl listening to music" height="447" />

    <h3>Image without [height] attribute</h3>
    <img src="./img_music.png" alt="Girl listening to music" width="500" />

    <h3>Jam SVG</h3>
    <img src="./img_jam.svg" alt="Jam pot" height="128" />

    <h3>Bass SVG</h3>
    <img src="./img_bass.svg" alt="Green bass" />

    <h3>Image with EXIF rotation should output correctly</h3>
    <img src="./plane.jpg" alt="Plane seats" />

    <h3>File name with special characters</h3>
    <img src="./img_avatar-kerer%C5%AB.jpg" alt="Avatar" />
</body>

</html>